<template>
    <div class="feeCount">
        <Header :bigDataTitle="bigDataTitle" @openMenu="openMenu" @navback="navback"/>
        <div class="feeMonth">
            <span>统计时间：</span>{{currentTime}}
            <mu-date-input v-model="value1" type="month" container="dialog" @change="changeValue" ></mu-date-input>
        </div>
        <div class="orignation-wrap" v-show="!noData">
            <div class="orignation-list" :class="{'active':activeIndex==2}">
                <div class="feecircle" id="feecircle"> </div>
                <div class="tips" >
                    <p ><span :style="{background:`${initColor[1]}`}"></span>已交党员<b>{{amount_arr.pay.num}}人({{amount_arr.pay.num_percentage*100}}%)</b></p>
                    <p style="background: rgba(0,0,0,0.1)"><span :style="{background:`${initColor[2]}`}"></span>未交党员<b>{{amount_arr.not_paya.num}}人({{amount_arr.pay.num_percentage*100}}%) </b></p>
                </div>
                <span class="iconshuju_icon_youqie iconfont" @click.stop="activeIndex=0"></span>
            </div>
            <div class="orignation-list2" :class="{'active':activeIndex==0}">
                <div class="feecircle" id="feecircle2"> </div>
                <div class="tips" >
                    <p ><span :style="{background:`${initColor[1]}`}"></span>已收党费<b>{{people_arr.pay.num}}人({{people_arr.pay.num_percentage*100}}%)</b></p>
                    <p style="background: rgba(0,0,0,0.1)"><span :style="{background:`${initColor[2]}`}"></span>未收党费<b>{{people_arr.not_paya.num}}人({{people_arr.pay.num_percentage*100}}%) </b></p>
                </div>
                <span class="iconshuju_icon_zuoqie iconfont" @click.stop="activeIndex=2"></span>
            </div>
        </div>
        <div class="noData" v-show="noData">
            <span>暂无数据</span>
        </div>
    </div>
</template>

<script>
    import Header from  '@/views/home/components/header.vue';
    import {mapState,mapMutations} from 'vuex';
    import {formatMonth} from '../utils'
    export default{
        data(){
            return{
                bigDataTitle:'党费缴纳',
                position: 'right',
                activeIndex:2,
                value1:'',
                currentTime:"",
                noData:false,
                amount_arr:{
                    not_paya:{
                        num: 0,
                        num_percentage: 0.67
                    },
                    pay:{
                        num: 0,
                        num_percentage: 0
                    }
                },
                people_arr:{
                    not_paya:{
                        num: 0,
                        num_percentage: 0.67
                    },
                    pay:{
                        num: 0,
                        num_percentage: 0
                    }
                }
            }
        },
        computed:{
            ...mapState({
                open:state=>state.initHomeData.open.open,
                initColor:state=>state.initHomeData.initColor
            })
        },
        methods:{
            ...mapMutations(['openHomeMenu']),
            openMenu(){
                console.log(123)
                this.openHomeMenu({
                    open:!this.open
                })
            },
            changeValue(e){
                console.log(e)
                this.currentTime =formatMonth(e.getTime());
                this.census_time =parseInt(e.getTime()/1000);
                this.getFee(JSON.parse(Cookies.get('user_71ydj')).id,this.census_time)
            },
            initFee(){
                let feecircle =document.getElementById('feecircle');
                let myChart = this.$echarts.init(feecircle);
                let text='应交党员 \n'+this.totalNum;
                let payData=[];
                for(var i=0;i<=2;i++){
                    if(i==0){
                        payData[i]={
                            value: this.totalNum,
                            itemStyle: {
                                normal: {
                                    color: 'rgba(0,0,0,0)'
                                }
                            }
                        }
                    }else if(i==1){
                        payData[i]={
                            value: this.amount_arr.pay.num,
                            itemStyle: {
                                normal: {
                                    color: this.initColor[i]
                                }
                            }
                        }
                    }else if(i==2){
                        payData[i]={
                            value: this.amount_arr.not_paya.num,
                            itemStyle: {
                                normal: {
                                    color: this.initColor[i]
                                }
                            }
                        }
                    }
                }
                let  option = {
                    title: {
                        text: text,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16,
                            fontWeight: 'normal',
                            formatter: function (name) {
                                console.log(name)
                                return name.value+'人'
                            },
                        },
                        left: 'center',
                        bottom:'40%',
                        itemGap: 60,

                    },
//                    color: ['#fff', '#000', '#5096e0'],
                    series: [
                        {
                            name: '严重',
                            type: 'pie',
                            startAngle: 0,
                            top:15,
                            bottom:100,
                            radius: ['50%', '58%'],
                            center: ['50%', '60%'],
                            legendHoverLink: false,
                            hoverAnimation: false,
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:payData
                        },
                    ]
                };
                myChart.setOption(option)
            },
            initpeople(){
                let feecircle2 =document.getElementById('feecircle2');
                let myChart2 = this.$echarts.init(feecircle2);
                let text='应收党费 \n'+this.totalNum;
                let payData=[];
                for(var i=0;i<=2;i++){
                    if(i==0){
                        payData[i]={
                            value: this.totalNum,
                            itemStyle: {
                                normal: {
                                    color: 'rgba(0,0,0,0)'
                                }
                            }
                        }
                    }else if(i==1){
                        payData[i]={
                            value: this.people_arr.pay.num,
                            itemStyle: {
                                normal: {
                                    color: this.initColor[i]
                                }
                            }
                        }
                    }else if(i==2){
                        payData[i]={
                            value: this.people_arr.not_paya.num,
                            itemStyle: {
                                normal: {
                                    color: this.initColor[i]
                                }
                            }
                        }
                    }
                }
                let  option = {
                    title: {
                        text: text,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16,
                            fontWeight: 'normal',
                            formatter: function (name) {
                                console.log(name)
                                return name.value+'人'
                            },
                        },
                        left: 'center',
                        bottom:'40%',
                        itemGap: 60,

                    },
//                    color: ['#fff', '#000', '#5096e0'],
                    series: [
                        {
                            name: '严重',
                            type: 'pie',
                            startAngle: 0,
                            top:15,
                            bottom:100,
                            radius: ['50%', '58%'],
                            center: ['50%', '60%'],
                            legendHoverLink: false,
                            hoverAnimation: false,
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:payData
                        },
                    ]
                };
                myChart2.setOption(option)
            },
            getFee(organization_id,time){
                this.$http.get('/app/DataVisualization/party_cost',{
                    organization_id,
                    time
                }).then((res)=>{
                    if(res.code=='200'){
                        if(Object.keys(res.data).length){
                            this.amount_arr =(res.data.amount_arr);
                            this.people_arr =(res.data.people_arr);
                            this.totalNum =res.data.amount_arr.payable;
                            this.initFee();
                            this.initpeople();
                            this.noData =true
                        }else{
                            this.noData =false;
                        }

                    }
                })
            },
            navback(){
                this.$router.go(-1);
            }
        },
        components:{
            Header
        },
        mounted(){
            if(!Cookies.get('user_71ydj')){
                this.$router.push({
                    path:'/mine'
                })
                return false
            }
            this.$progress.done();
            this.currentTime =formatMonth(+new Date().getTime());
            this.census_time =parseInt(+new Date().getTime()/1000);
            this.getFee(JSON.parse(Cookies.get('user_71ydj')).id,this.census_time );
        },
    }
</script>
<style lang="scss" scoped="">
    .feeCount{
        color: white;
        min-height: 100vh;
        background: #183377;
        .orignation-wrap{
            width: 100%;
            height: 641px;
            position: relative;
            overflow: hidden;
            .orignation-list{
                position: absolute;
                left: 0;
                top:0;
                width: 100%;
                height: 100%;
                position: relative;
                z-index: 1;
                transform: translateX(-100%);
                span.iconfont{
                    position: absolute;
                    right: 10px;
                    top: 160px;
                }
                &.active{
                    transform: translateX(0);
                    z-index: 22;
                }
            }
            .orignation-list2{
                width: 100%;
                height: 100%;
                transform: translateX(100%);
                position: absolute;
                left: 0;
                top:0;
                z-index: -1;
                span.iconfont{
                    position: absolute;
                    left: 10px;
                    top: 160px;
                }
                &.active{
                    transform: translateX(0%);
                    z-index: 22;
                }
            }
        }
        .feeMonth{
            height: 50px;
            line-height: 50px;
            margin-top: 45px;
            background: rgba(0,0,0,0.1);
            text-align: center;
            color:rgba(255,255,255,0.3);
            font-size: 13px;
            position: relative;
            .mu-input{
                position: absolute;
                left: 0;
                top:0;
                width: 100%;
                height: 100%;
                opacity: 0;
            }
            span{
                color: white;
                font-size: 14px;
            }
        }
        #feecircle,#feecircle2{
            height: 280px;
        }
        .tips{
            p{
                height: 50px;
                border-bottom: 1px solid rgba(255,255,255,0.05);
                font-size: 16px;
                color: white;
                font-weight: normal;
                line-height: 50px;
                span{
                    display: inline-block;
                    width: 30px;
                    height: 10px;
                    background: #0D65FC;
                    margin-left: 20px;
                    margin-right: 10px;
                }
                b{
                    float: right;
                    font-weight: normal;
                }
            }
        }
    }
    .noData{
        height: 200px;
        position: relative;
        span{
            position: absolute;
            left: 0;
            top:0;
            right: 0;
            bottom: 0;
            margin: auto;
            font-size: 14px;
            color: white;
            width: 100%;
            height: 30px;
            text-align: center;
        }
    }
</style>